import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { AtTag } from 'taro-ui';
import MainCardBar from '@/components/MainCardBar';
import dayjs from 'dayjs';
import { formatHttp2Https } from '@/utils/format';
import { useUserStore } from '@/business/store/user/login';
import cssModule from './index.module.scss';

/**
 * @description 卡片组件
 * @author Shawn
 */

// 组件接收的参数
interface DefaultPageProps {
  item: any; // item数据
  isContact?: boolean; // 是否显示联系TA按钮
  isOprate?: boolean; // 是否显示操作栏
  cityCode?: string; // 城市编码
  onContact?: (item: any) => void; // 联系TA回调
  source?: string;
}

export default function MainCard({ item, isOprate, cityCode, isContact = true, onContact, source }: DefaultPageProps) {
  const useUser = useUserStore();

  // 需求详情
  const handleDetail = (id: string) => {
    Taro.navigateTo({
      url: `/subPackages/detail/index?id=${id}`,
    });
  };

  // 联系TA
  const handleContact = () => {
    if (useUser?.vipInfo?.vipLevelId === '001') {
      onContact?.(item);
    } else {
      Taro.navigateTo({
        url: `/subPackages/equity/index`,
      });
    }
  };


  const handlePerson = (item: any) => {
    console.log('点击用户卡片跳转用户详情===', item);
    // 点击用户卡片跳转用户详情
    if (useUser?.vipInfo?.vipLevelId === '001') {
      Taro.navigateTo({
        url: `/subPackages/userDetail/index?id=${item.userId}`
      });
    } else {
      Taro.navigateTo({
        url: `/subPackages/equity/index`,
      });
    }
  }

  return (
    <View className={cssModule.container}>
      {
        item.userId !== useUser.userInfo.userId && isContact &&
        <View className={cssModule.contactBtn} onClick={handleContact}>
          <Text>联系TA</Text>
        </View>
      }
      <View>
        <View onClick={() => {
          if (useUser?.vipInfo?.vipLevelId === '001') {
            handleDetail(item.id);
          } else {
            Taro.navigateTo({
              url: `/subPackages/equity/index`,
            });
          }
        }}>
          <View className={cssModule.header}>
            <View className={cssModule.avatar} onClick={(e) => {
              e.stopPropagation();
              if (source === 'user') return
              handlePerson(item)
            }}>
              <Image src={formatHttp2Https(item.userSimpleVO?.headImg) || 'https://baoyouqun.cn/files/static/images/person.png'} mode='aspectFill' />
            </View>
            <View className={cssModule.userInfo}>
              <View className={cssModule.userName}>
                <Text>
                  {useUser?.vipInfo?.vipLevelId !== '001'
                    ? (item.userSimpleVO?.name ? item.userSimpleVO.name[0] + '**' : '***')
                    : item.userSimpleVO?.name}
                </Text>
                {
                  useUser?.vipInfo?.vipLevelId === '001' && <View className={cssModule.vip}>
                    <Image src='https://baoyouqun.cn/files/static/images/vip.png' mode='aspectFill' />
                  </View>
                }
              </View>
              <Text className={cssModule.postTime}>更新于 {dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}
              </Text>
            </View>
          </View>
          <View className={cssModule.content}>
            <View className={cssModule.title}>
              <Text className='max-w-[400px] overflow-hidden whitespace-nowrap text-ellipsis'>{item.title}</Text>
              {/* <AtTag className='ml-2 overflow-hidden whitespace-nowrap text-ellipsis' size='small'>
              {item.cityName || '全国'}
            </AtTag> */}
              {
                item.resourceUrgency.value === 'urgent' && <AtTag className='ml-2' type='primary' size='small'>
                  {item.resourceUrgency.name}
                </AtTag>
              }
            </View >
            <Text className={cssModule.description} >
              {item.description}
            </Text>
          </View >
        </View>
        {/* 底部操作栏 */}
        {isOprate && <MainCardBar cityCode={cityCode} demandDetail={item} source={source} />}
      </View>
    </View>
  );
}
